<template>
    <ZWDrawer ref="DrawerRef">
        <div class="content_detail">
            <div class="pre_list">
                <!--基础信息-->
                <ul class="pre_main">
                    <li v-for="(item, index) in view_info" :key="index" class="pre_list_item">
                        <template v-if="item.content == 'shop_info'">
                            <span class="pre__item_label">{{ item.name }}</span>
                            <span class="pre_item_con">{{ info.shop_info?.name }}</span>
                        </template>
                        <template v-else-if="item.content == 'external_order_id'">
                            <span class="pre__item_label">{{ item.name }}</span>
                            <span class="pre_item_con">
                                {{ info[item.content] ? info[item.content] : '--' }}
                                <span class="copy_text" @click="Copy(info[item.content])">复制</span>
                            </span>
                        </template>
                        <template v-else-if="item.content == 'cust_name'">
                            <span class="pre__item_label">{{ item.name }}</span>
                            <span class="pre_item_con color_tips">{{ renderCustName }}</span>
                        </template>
                        <template v-else-if="item.content == 'distribution_work_username'">
                            <span class="pre__item_label">{{ item.name }}</span>
                            <span class="pre_item_con">
                                {{
                                    info.bind_cust_info?.distribution_work_username
                                        ? info.bind_cust_info?.distribution_work_username
                                        : '--'
                                }}
                            </span>
                        </template>
                        <template v-else-if="item.content == 'external_user_id'">
                            <span class="pre__item_label">{{ item.name }}</span>
                            <el-tooltip
                                v-if="info.external_user_id?.length > 42"
                                placement="top"
                                effect="light"
                                :content="info.external_user_id">
                                <span class="pre_item_con">{{ info.external_user_id || '--' }}</span>
                            </el-tooltip>
                            <span v-else class="pre_item_con">{{ info.external_user_id }}</span>
                        </template>
                        <template v-else>
                            <span class="pre__item_label">{{ item.name }}</span>
                            <span class="pre_item_con">{{ info[item.content] ? info[item.content] : '--' }}</span>
                        </template>
                    </li>
                </ul>
                <ul class="pre_main">
                    <li v-for="(item, index) in basic_info" :key="index" class="pre_list_item">
                        <template v-if="item.content == 'cope_amount'">
                            <span class="pre__item_label">{{ item.name }}</span>
                            <span class="pre_item_con">
                                {{ info.cope_amount + '元/' }}
                                <span class="color_tips">{{ info.actually_amount }}</span>
                                元
                            </span>
                        </template>
                        <template v-else-if="item.content == 'post_amount' || item.content == 'discount_amount'">
                            <span class="pre__item_label">{{ item.name }}</span>
                            <span class="pre_item_con">{{
                                info[item.content] ? info[item.content] + '元' : '--'
                            }}</span>
                        </template>
                        <template v-else>
                            <!--快手店铺不展示支付流水号-->
                            <div v-if="info.source == 10 && item.content == 'pay_serial_number'"></div>
                            <div v-else>
                                <span class="pre__item_label">{{ item.name }}</span>
                                <span class="pre_item_con">{{ info[item.content] ? info[item.content] : '--' }}</span>
                            </div>
                        </template>
                    </li>
                </ul>
            </div>
            <div class="shipAddress">
                <div class="ship_title">收货地址：</div>
                <div class="ship_tip">
                    <el-icon style="font-size: 20px; color: #ff6b00; padding-left: 6px; vertical-align: middle">
                        <LocationFilled />
                    </el-icon>
                    <span class="ship_detail">
                        {{ info.order_consignee?.contact }}
                        <span style="margin: 0 10px"> {{ info.order_consignee?.mobile }}</span>
                        {{ info.order_consignee?.region }}{{ info.order_consignee?.address }}
                    </span>
                </div>
            </div>
            <!--3淘宝6天猫7抖店商品信息-->
            <div v-if="[3, 6, 7].includes(info.source)">
                <div v-for="(item, index) in info.subOrderList" :key="index">
                    <div class="order_No">
                        <div class="ship_title">
                            子订单编号({{ item.orderId ?? '--' }})
                            <span class="copy_text" @click="Copy(item.orderId)">复制</span>
                        </div>
                        <div class="status-name">{{ item.status_name || '--' }}</div>
                    </div>
                    <div class="goods">
                        <div class="goods_detail">
                            <el-image class="goods_img" :src="item.productPic"></el-image>
                            <div>
                                <div class="goods_title">
                                    {{ item.productName }}
                                </div>
                                <div class="goods_size">
                                    {{ item.spec }}
                                </div>
                                <div class="goods-price">
                                    <div style="color: #ff6b00">￥{{ item.originAmount }}</div>
                                    <div class="goods_size">X{{ item.itemNum }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--快手小店商品信息-->
            <div v-if="info.source == 10">
                <div v-for="(item, index) in info.order_product" :key="index">
                    <div class="order_No">
                        <div class="ship_title">商品信息</div>
                    </div>
                    <div class="goods">
                        <div class="goods_detail">
                            <el-image class="goods_img" :src="item.cover"></el-image>
                            <div>
                                <div class="goods_title">
                                    {{ item.external_product_name }}
                                </div>
                                <div class="goods_size">
                                    {{ item.product_sku_name }}
                                </div>
                                <div class="goods-price">
                                    <div style="color: #ff6b00">￥{{ item.buy_price }}</div>
                                    <div class="goods_size">X{{ item.buy_qty }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--3淘宝6天猫7抖店详细信息-->
            <div v-if="[3, 6, 7].includes(info.source)">
                <el-descriptions class="margin-top" title="平台订单其他详细信息：" :column="4" border>
                    <el-descriptions-item
                        v-for="(item, index) in info.extension_info"
                        :key="index"
                        :label="item.name"
                        :width="300">
                        <el-tooltip
                            v-if="item.isShowTooltip"
                            placement="top"
                            effect="light"
                            :content="item.val === '' ? '--' : item.val">
                            <div class="desc_item">
                                {{ item.val === '' ? '--' : item.val }}
                            </div>
                        </el-tooltip>
                        <div v-else class="desc_item">
                            {{ item.val === '' ? '--' : item.val }}
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <!--快手小店详细信息-->
            <div v-if="info.source == 10">
                <div class="title-tips">平台订单其他详细信息：</div>
                <el-descriptions
                    v-for="(item, index) in info.extension_info_new"
                    :key="index"
                    class="margin-tip"
                    :title="item.name"
                    :column="4"
                    size="small"
                    border>
                    <el-descriptions-item
                        v-for="(jtem, index) in item.list"
                        :key="index"
                        :label="jtem.name"
                        :width="300">
                        <el-tooltip
                            v-if="item.isShowTooltip"
                            placement="top"
                            effect="light"
                            :content="jtem.val || jtem.val === 0 ? jtem.val : '--'">
                            <div class="desc_item">
                                {{ jtem.val || jtem.val === 0 ? jtem.val : '--' }}
                            </div>
                        </el-tooltip>
                        <div v-else class="desc_item">
                            {{ jtem.val || jtem.val === 0 ? jtem.val : '--' }}
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <!-- 视频号小店的商品信息 -->
            <tradingCommodityInfo v-if="info.source === 9" ref="tradingCommodityInfoRef" :info="info" />
        </div>
    </ZWDrawer>
</template>
<script lang="tsx" setup>
import { ref, reactive, computed, nextTick } from 'vue';
import ZWDrawer from '@/components/ZWDrawer.vue';
import { getOrderDetail } from '@/api/ecommerce/tradingManage';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import tradingCommodityInfo from './tradingCommodityInfo/tradingCommodityInfo.vue';

const { toClipboard } = useClipboard();
const DrawerRef = ref<any>(null);
const info = ref<any>({});
const view_info = reactive([
    { name: '订单编号：', content: 'external_order_id' },
    { name: '订单状态：', content: 'state_name' },
    { name: '订单来源：', content: 'source_name' },
    { name: '归属店铺：', content: 'shop_info' },
    { name: '绑定客户：', content: 'cust_name' },
    { name: '关联门店：', content: '--' },
    { name: '归属员工：', content: 'distribution_work_username' },
    { name: '购买账号：', content: 'external_user_id' }
]);
const basic_info = reactive([
    { name: '应付/实付金额：', content: 'cope_amount' },
    { name: '运费：', content: 'post_amount' },
    { name: '优惠金额：', content: 'discount_amount' },
    { name: '下单时间：', content: 'order_time' },
    { name: '支付时间：', content: 'pay_time' },
    { name: '签收时间：', content: 'sign_time' },
    { name: '完成时间：', content: 'finish_time' },
    { name: '支付流水号：', content: 'pay_serial_number' }
]);
const renderCustName = computed(() => {
    const { cust_name, name, mobile } = info.value.bind_cust_info || {};
    if (!cust_name && !name && !mobile) {
        return '--';
    }
    const formatText = (value: string) => value || '--';
    return `${formatText(cust_name || name)} ${`(${formatText(mobile)})`}`;
});
const paramsData = reactive({});
const openDetail = (row: any) => {
    DrawerRef.value.title = `【${row.external_order_id}】订单详情`;
    DrawerRef.value.showExamine = false;
    DrawerRef.value.isShow = false;
    DrawerRef.value.drawer = true;
    DrawerRef.value.width = 1000;
    getDetail(row);
};

const tradingCommodityInfoRef = ref<any>(null);
const getDetail = (val: any) => {
    getOrderDetail({ order_id: val.id }).then((res: any) => {
        info.value = res;
        //3淘宝6天猫7抖店
        if ([3, 6, 7].includes(res.source)) {
            info.value.extension_info = res.extension_info.map(item => {
                item.isShowTooltip = item.val.toString().pxWidth('normal 14px sans-serif') / 2 > 92;
                return item;
            });
            //10快手小店
        } else if (res.source === 10) {
            info.value.extension_info_new = res.extension_info_new.map(item => {
                item.list = item.list.map(ite => {
                    ite.isShowTooltip = ite.val.toString().pxWidth('normal 14px sans-serif') / 2 > 92;
                    return ite;
                });
                return item;
            });
        }
        nextTick(() => tradingCommodityInfoRef.value?.reload());
    });
};
//设置平台订单其他详细信息多于两行才能hover显示
String.prototype.pxWidth = function (font) {
    const canvas =
        String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement('canvas'));
    const context = canvas.getContext('2d');
    font && (context.font = font);
    const metrics = context.measureText(this);
    return metrics.width;
};

const Copy = async (val: any) => {
    try {
        await toClipboard(val);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};
defineExpose({
    openDetail
});
</script>
<style lang="scss" scoped>
.content_detail {
    padding: 8px;
    padding-bottom: 24px;
}

.pre_list {
    padding: 0 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
    display: flex;
    border: 1px solid #eaeaea;
    .pre_main {
        width: 50%;
        display: block;
        padding-top: 24px;
        .pre_list_item {
            margin-bottom: 24px;
            display: flex;
            font-size: 14px;
            line-height: 14px;
            font-weight: 400;
            text-align: right;
            color: #33302d;
            .pre__item_label {
                display: inline-block;
                white-space: nowrap;
                text-align: right;
            }
            .pre_item_con {
                width: 220px;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-line-clamp: 1; //元素几行显示
                -webkit-box-orient: vertical;
                text-align: left;
                flex: 1;
            }
        }

        // 处理样式不对齐的问题（label右对齐的情况下）
        &:last-child {
            .pre_list_item {
                .pre__item_label {
                    width: 110px;
                }
            }
        }
    }
}

.shipAddress {
    border: 1px solid #eaeaea;
    padding: 20px 24px;
    margin-bottom: 24px;
    .ship_tip {
        margin-top: 15px;
        display: flex;
        align-items: center;
        .ship_detail {
            font-size: 14px;
            font-weight: 400;
            color: #33302d;
        }
    }
}

.order_No {
    display: flex;
    justify-content: space-between;
    border: 1px solid #eaeaea;
    border-bottom: none;
    padding: 20px 24px;
}

.goods {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
    .goods_detail {
        display: flex;
        flex: 1;
        padding: 15px 0 0 15px;
        border: 1px solid #eaeaea;
        .goods_img {
            width: 80px;
            height: 80px;
            margin-right: 8px;
        }
        .goods_title {
            width: 284px;
            height: 36px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 14px;
            font-weight: 400;
            color: #33302d;
            line-height: 18px;
        }

        .goods_size {
            display: block;
            margin: 4px 0 12px 0;
            font-size: 14px;
            font-weight: 400;
            color: #969696;
        }

        .goods-price {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
    }
}

.copy_text {
    cursor: pointer;
    color: #ff6b00;
    margin-left: 5px;
    font-weight: 500;
    font-size: 14px;
}

.color_tips {
    color: #ff6b00 !important;
}

.ship_title {
    font-size: 16px;
    font-weight: 700;
}

.margin-top {
    border: 1px solid #eaeaea;
    :deep(.el-descriptions__title) {
        padding: 15px 0 0 24px;
    }
}
.margin-tip {
    border: 1px solid #eaeaea;
    border-top: none;
    :deep(.el-descriptions__title) {
        padding: 15px 0 0 30px;
    }
}
.desc_item {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 14px;
}
.title-tips {
    color: #303133;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 0 16px 24px;
    border: 1px solid #eaeaea;
}
.status-name {
    font-size: 14px;
}
</style>
